<template>
    <div id="header">
        <div class="header_top container clearflx">
            <div class="logo">
                <img src="../../assets/logo_03.gif" alt="">
            </div>
            <div class="search">
                <ul class="clearflx search_top">
                    <li :class="{on:search_topBtn==0}" @click="search_topBtn=0" >展会</li>
                    <li :class="{on:search_topBtn==2}" @click="search_topBtn=2" >资讯</li>
                    <li :class="{on:search_topBtn==3}" @click="search_topBtn=3" >服务</li>
                    <li :class="{on:search_topBtn==4}" @click="search_topBtn=4" >展馆</li>
                </ul>
                <form action="" method="" class="search_bottom clearflx">
                    <input type="text" placeholder="请输入关键字" class="search_text">
                    <input type="submit" value="搜索" class="search_btn">
                </form>
            </div>
            
        </div>
        <div class="container">
            <div class="navtab clearflx">
                <div class="navtab_left">
                    <div class="clearflx">
                        <router-link class="navtab_list" :class="{navtab_active:navTab_btn==0}" @click="navTab_btn=0" to="/">首页</router-link>
                        <router-link class="navtab_list" :class="{navtab_active:navTab_btn==1}" @click="navTab_btn=1" to="/info">展会信息</router-link>
                        <router-link class="navtab_list" :class="{navtab_active:navTab_btn==2}" @click="navTab_btn=2" to="/consult">展会资讯</router-link>
                        <router-link class="navtab_list" :class="{navtab_active:navTab_btn==3}" @click="navTab_btn=3" to="/server">展会服务</router-link>
                        <router-link class="navtab_list" :class="{navtab_active:navTab_btn==4}" @click="navTab_btn=4" to="/exhibitionCenter">展会中心</router-link>
                    </div>
                </div>
                <div class="navtab_right">
                    <ul class="clearflx">
                        <router-link to="/login" class="logobtn">登录</router-link>
                        <router-link to="/register" class="logobtn register">注册</router-link>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        navType:String
    },
    data() {
        return {
            // 搜索栏上面的tab切换
            search_topBtn:0,
            // 导航栏tab切换
            navTab_btn:0,
            
        }
    },
    created() {
        this.navTab_btn=this.navType;
        this.search_topBtn=this.navType;
    },
}
</script>
<style lang="scss" scoped>
    .header_top{
        .logo{
            width: 526px;
            float: left;
            > img{
                width: 100%;
            }
        }
        .search{
            width: 400px;
            // height: 200px;
            float: right;
            // background-color: red;
            .search_top{
                margin-top:40px;
                padding-left: 10px;
                > li{
                    padding: 0 6px;
                    margin: 0 4px;
                    float: left;
                    color: #c81622;
                    font-size: 12px;
                }
                > li:hover{
                    color: #fff;
                    background-color: #c81622;
                    cursor: pointer;
                }
                .on{
                    color: #fff;
                    background-color: #c81622;
                }
            }
            .search_bottom{
                display: block;
                .search_text{
                    width: 318px;
                    height: 10px;
                    line-height: 10px;
                    font-size: 12px;
                    padding:10px;
                    border: 1px solid #c81622;
                    float: left;
                }
                .search_btn{
                    float: left;
                    width: 60px;
                    height: 32px;
                    line-height: 32px;
                    font-size: 16px;
                    color: #fff;
                    background-color:#c81622;
                    border:none;
                }
            }
        }
    }
    .navtab{
        margin: 10px 0;
        .navtab_left{
            // width: 700px;
            float: left;
            > .clearflx{
                .navtab_list{
                    display: block;
                    padding:0 4px;
                    margin:0 20px;
                    font-size: 20px;
                    color: #848484;
                    float: left;
                }
                .navtab_list:hover{
                    cursor: pointer;
                    color:#c81622;
                }
                .navtab_active{
                    color:#c81622;
                }
            }
        }
        .navtab_right{
            // width: 100px;
            float: right;
            .clearflx{
                .logobtn{
                    padding:0 4px;
                    margin:0 10px;
                    font-size: 20px;
                    color: #848484;
                    float: left;
                }
                .logobtn:hover{
                    cursor: pointer;
                    color:#c81622;
                }
            }
        }
    }
</style>